﻿<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Home.aspx.vb" Inherits="WebPhonebook.WebForm1" %>

<%@ Register assembly="Microsoft.ReportViewer.WebForms, Version=10.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a" namespace="Microsoft.Reporting.WebForms" tagprefix="rsweb" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <%--<link href="Styles/Site.css" type="text/css" rel="stylesheet"/>--%>
</head>
<body>
    <form id="form1" runat="server">
    <div style="height: 1794px; width: 800px; margin-right: auto; font-weight: 700;" id = "MainContent">
    
        <strong>
        <asp:Image ID="Image1" runat="server" Height="50px" 
            ImageUrl="~/Images/Tulips.jpg" ToolTip="This is an Image Server Control" 
            Width="50px" />
        &nbsp;<asp:Label ID="User" runat="server"></asp:Label>
        , </strong>Welcome to the Phonebook Web Application
        <input id="Button3" type="button" value="background-color" />
        <script type="text/javascript">
            $(document).ready(function () {
                //$('#MainContent').css('background-color', 'green')
                
                $('#Button3').click(function () {
                    $('#MainContent').css('background-color', 'red')
                .animate({ width: '500px', height: '800px' })
                });
            });
            
        </script>
        <br />
        <br />
        <asp:ValidationSummary ID="ValidationSummary1" runat="server" ForeColor="Red" 
            HeaderText="The following fields are not valid:" ShowMessageBox="True" />
        GridView<br />
        <br />
        <asp:GridView ID="GridView1" runat="server" AllowPaging="True" 
            AllowSorting="True" DataSourceID="SqlDataSource1" 
            AutoGenerateColumns="False" Height="213px" Width="418px" CellPadding="4" 
            ForeColor="#333333" GridLines="None" DataKeyNames="id">
            <AlternatingRowStyle BackColor="White" ForeColor="#284775" />
            <Columns>
                <asp:BoundField DataField="fname" HeaderText="fname" 
                    SortExpression="fname" />
                <asp:TemplateField HeaderText="lname" SortExpression="lname">
                    <EditItemTemplate>
                        <asp:TextBox ID="LnameEditTextbox" runat="server" Text='<%# Bind("lname") %>'></asp:TextBox>
                        <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" 
                            ControlToValidate="LnameEditTextbox" ErrorMessage="*required" ForeColor="Red"></asp:RequiredFieldValidator>
                    </EditItemTemplate>
                    <ItemTemplate>
                        <asp:Label ID="Label2" runat="server" Text='<%# Bind("lname") %>'></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="cell" SortExpression="cell">
                    <EditItemTemplate>
                        <asp:TextBox ID="CellEditTextbox" runat="server" Text='<%# Bind("cell") %>'></asp:TextBox>
                        <asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server" 
                            ControlToValidate="CellEditTextbox" ErrorMessage="xxx-xxx-xxxx" ForeColor="Red" 
                            ValidationExpression="((\(\d{3}\) ?)|(\d{3}-))?\d{3}-\d{4}"></asp:RegularExpressionValidator>
                    </EditItemTemplate>
                    <ItemTemplate>
                        <asp:Label ID="Label1" runat="server" Text='<%# Bind("cell") %>'></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:ImageField DataImageUrlField="picture" HeaderText="Pic">
                    <ControlStyle Height="40px" Width="40px" />
                </asp:ImageField>
                <asp:BoundField DataField="id" HeaderText="ID" 
                    SortExpression="id" ReadOnly="True" />
                <asp:CommandField HeaderText="Command" ShowDeleteButton="True" 
                    ShowEditButton="True" ShowHeader="True" ShowSelectButton="True" />
                <asp:TemplateField HeaderText="Add">
                    <ItemTemplate>
                        <asp:LinkButton ID="lblNew" runat="server" CausesValidation="false" CommandName="Insert"
                            Text="Add" Style="vertical-align: middle; text-align: center" Font-Bold="False"
                            ForeColor="Black" Height="16px" Width="49px" OnClick="GridViewAdd"></asp:LinkButton>
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
            <EditRowStyle BackColor="#999999" />
            <FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
            <HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
            <PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
            <RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
            <SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
            <SortedAscendingCellStyle BackColor="#E9E7E2" />
            <SortedAscendingHeaderStyle BackColor="#506C8C" />
            <SortedDescendingCellStyle BackColor="#FFFDF8" />
            <SortedDescendingHeaderStyle BackColor="#6F8DAE" />
        </asp:GridView>
        <asp:SqlDataSource ID="SqlDataSource1" runat="server" 
            ConnectionString="<%$ ConnectionStrings:PhonebookConnectionString %>"   
            
            SelectCommand="SELECT fname, lname, cell, picture, id FROM contacts ORDER BY lname, fname" 
            DeleteCommand="DELETE FROM contacts WHERE (id = @id)"             
            UpdateCommand="UPDATE contacts SET fname = @fname, lname = @lname, cell = @cell, picture = @picture WHERE (id = @id)"  
            InsertCommand="INSERT INTO contacts(fname, lname, cell, picture) VALUES (@fname, @lname, @cell, @picture)">
            <DeleteParameters>
                <asp:Parameter Name="id" />
            </DeleteParameters>
            <InsertParameters>
                <asp:Parameter Name="fname" />
                <asp:Parameter Name="lname" />
                <asp:Parameter Name="cell" />
                <asp:Parameter Name="picture" />
            </InsertParameters>
            <UpdateParameters>
                <asp:Parameter Name="fname" />
                <asp:Parameter Name="lname" />
                <asp:Parameter Name="cell" />
                <asp:Parameter Name="picture" />
                <asp:Parameter Name="id" />
            </UpdateParameters>
        </asp:SqlDataSource>
    
        <asp:SqlDataSource ID="SqlDataSource2" runat="server" 
            ConnectionString="<%$ ConnectionStrings:PhonebookConnectionString2 %>" 
            SelectCommand="SELECT DISTINCT * FROM [contacts] WHERE ([lname] = @lname) ORDER BY [lname], [fname]">
            <SelectParameters>
                <asp:ControlParameter ControlID="TextBox1" Name="lname" PropertyName="Text" 
                    Type="String" />
            </SelectParameters>
        </asp:SqlDataSource>
    
        <asp:Label ID="Message" runat="server" ForeColor="#3399FF"></asp:Label>
    
   
        <br />

        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
        &nbsp;<asp:Button ID="Search" runat="server" Text="Search"/>
        &nbsp;<asp:Button ID="Button1" runat="server" Text="Reset" Width="62px" />
        &nbsp;<asp:Button ID="Add" runat="server" Text="Add " Width="63px" />
        
        <br />
        <br />
        <asp:ScriptManager ID="ScriptManager1" EnablePageMethods="true" runat="server">
        <Services>
        <asp:ServiceReference Path="~/WebServices/NameService.asmx"/>
        </Services>
        <Scripts>
        <asp:ScriptReference Path="~/Scripts/jquery-1.4.1.min.js" />
        </Scripts>
        </asp:ScriptManager>
        <input id="YourName" type="text" />
        <input id="SayHello" type="button" value="Say Hello" />
        <input id="SayHelloPageMethod" type="button" value="Say Hello With a Page Method" />
        <script type="text/javascript">
            function HelloWorld() {
                var yourName = $get('YourName').value;
                //HelloWorldCallback is a successful callback method that is triggered when the service
                //has returned the result successfully.      
                //Similarly, we can also add another method that is triggered when the web service somehow fails
                //NameService.HelloWorld(yourName, HelloWorldCallBack, ErrorCallback);
                WebPhonebook.NameService.HelloWorld(yourName, HelloWorldCallback);
                
            }

            function HelloWorldCallback(result) {
                alert(result);
            }

            function HelloWorldPageMethod() {
                var yourName = $get('YourName').value;
                PageMethods.HelloWorld(yourName, HelloWorldCallback);
            }

            $addHandler($get('SayHello'), 'click', HelloWorld);
            $addHandler($get('SayHelloPageMethod'), 'click', HelloWorldPageMethod)
        </script>


        <asp:UpdatePanel ID="UpdatePanel2" runat="server">
        <ContentTemplate>
                <asp:Label ID="Time" runat="server" ForeColor="#33CC33"></asp:Label>
                <br />
                <%--<asp:Timer ID="Timer1" runat="server" Interval="10000">
                </asp:Timer>--%>
                <br />


<%--            <table style="width: 100%;">
                <tr>
                    <td>
                        DetailsView
                    </td>
                    <td>
                        FormView
                    </td>

                </tr>
                <tr>
                    <td>
                        <asp:DetailsView ID="DetailsView2" runat="server" AllowPaging="True" 
            AutoGenerateRows="False" CellPadding="4" DataKeyNames="id" 
            DataSourceID="SqlDataSource1" ForeColor="#333333" GridLines="None">
            <AlternatingRowStyle BackColor="White" ForeColor="#284775" />
            <CommandRowStyle BackColor="#E2DED6" Font-Bold="True" />
            <EditRowStyle BackColor="#999999" />
            <FieldHeaderStyle BackColor="#E9ECF1" Font-Bold="True" />
            <Fields>
                <asp:BoundField DataField="fname" HeaderText="fname" SortExpression="fname" />
                <asp:TemplateField HeaderText="lname" SortExpression="lname">
                    <EditItemTemplate>
                        <asp:TextBox ID="DetailView_lname" runat="server" Text='<%# Bind("lname") %>'></asp:TextBox>
                        <asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" 
                            ControlToValidate="DetailView_lname" ErrorMessage="*Required" ForeColor="Red"></asp:RequiredFieldValidator>
                    </EditItemTemplate>
                    <InsertItemTemplate>
                        <asp:TextBox ID="TextBox2" runat="server" Text='<%# Bind("lname") %>'></asp:TextBox>
                        <asp:RequiredFieldValidator ID="RequiredFieldValidator5" runat="server" 
                            ControlToValidate="TextBox2" ErrorMessage="*required" ForeColor="Red"></asp:RequiredFieldValidator>
                    </InsertItemTemplate>
                    <ItemTemplate>
                        <asp:Label ID="Label3" runat="server" Text='<%# Bind("lname") %>'></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="cell" SortExpression="cell">
                    <EditItemTemplate>
                        <asp:TextBox ID="TextBox3" runat="server" Text='<%# Bind("cell") %>'></asp:TextBox>
                        <asp:RegularExpressionValidator ID="RegularExpressionValidator2" runat="server" 
                            ControlToValidate="TextBox3" ErrorMessage="xxx-xxx-xxxx" ForeColor="Red" 
                            ValidationExpression="((\(\d{3}\) ?)|(\d{3}-))?\d{3}-\d{4}"></asp:RegularExpressionValidator>
                    </EditItemTemplate>
                    <InsertItemTemplate>
                        <asp:TextBox ID="TextBox4" runat="server" Text='<%# Bind("cell") %>'></asp:TextBox>
                        <asp:RegularExpressionValidator ID="RegularExpressionValidator4" runat="server" 
                            ControlToValidate="TextBox4" ErrorMessage="xxx-xxx-xxxx" 
                            ValidationExpression="((\(\d{3}\) ?)|(\d{3}-))?\d{3}-\d{4}"></asp:RegularExpressionValidator>
                    </InsertItemTemplate>
                    <ItemTemplate>
                        <asp:Label ID="Label4" runat="server" Text='<%# Bind("cell") %>'></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:ImageField DataImageUrlField="picture" HeaderText="picture">
                    <ControlStyle Height="40px" Width="40px" />
                </asp:ImageField>
                <asp:BoundField DataField="id" HeaderText="id" InsertVisible="False" 
                    SortExpression="id" />
                <asp:TemplateField ShowHeader="False">
                    <EditItemTemplate>
                        <asp:LinkButton ID="LinkButton4" runat="server" CausesValidation="True" 
                            CommandName="Update" Text="Update"></asp:LinkButton>
                        &nbsp;<asp:LinkButton ID="LinkButton2" runat="server" CausesValidation="False" 
                            CommandName="Cancel" Text="Cancel"></asp:LinkButton>
                    </EditItemTemplate>
                    <InsertItemTemplate>
                        <asp:LinkButton ID="DetailsViewInsert" runat="server" CausesValidation="True" 
                            CommandName="Insert" Text="Insert"></asp:LinkButton>
                        &nbsp;<asp:LinkButton ID="LinkButton5" runat="server" CausesValidation="False" 
                            CommandName="Cancel" Text="Cancel"></asp:LinkButton>
                    </InsertItemTemplate>
                    <ItemTemplate>
                        <asp:LinkButton ID="LinkButton6" runat="server" CausesValidation="False" 
                            CommandName="Edit" Text="Edit"></asp:LinkButton>
                        &nbsp;<asp:LinkButton ID="LinkButton7" runat="server" CausesValidation="False" 
                            CommandName="New" Text="New"></asp:LinkButton>
                        &nbsp;<asp:LinkButton ID="LinkButton3" runat="server" CausesValidation="False" 
                            CommandName="Delete" Text="Delete"></asp:LinkButton>
                    </ItemTemplate>
                </asp:TemplateField>
            </Fields>
            <FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
            <HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
            <PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
            <RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
        </asp:DetailsView>
                    </td>
                    <td>
                      <asp:FormView ID="FormView2" runat="server" AllowPaging="True" CellPadding="4" 
            DataKeyNames="id" DataSourceID="SqlDataSource1" ForeColor="#333333">
            <EditItemTemplate>
                fname:
                <asp:TextBox ID="fnameTextBox" runat="server" Text='<%# Bind("fname") %>' />
                <br />
                lname:
                <asp:TextBox ID="lnameTextBox" runat="server" Text='<%# Bind("lname") %>' />
                <asp:RequiredFieldValidator ID="RequiredFieldValidator4" runat="server" 
                    ControlToValidate="lnameTextBox" ErrorMessage="Required" ForeColor="Red"></asp:RequiredFieldValidator>
                <br />
                cell:
                <asp:TextBox ID="cellTextBox" runat="server" Text='<%# Bind("cell") %>' />
                <asp:RegularExpressionValidator ID="RegularExpressionValidator3" runat="server" 
                    ControlToValidate="cellTextBox" ErrorMessage="xxx-xxx-xxxx" ForeColor="Red" 
                    ValidationExpression="((\(\d{3}\) ?)|(\d{3}-))?\d{3}-\d{4}"></asp:RegularExpressionValidator>
                <br />
                picture:
                <asp:TextBox ID="pictureTextBox" runat="server" Text='<%# Bind("picture") %>' />
                <asp:Image ID="Image2" runat="server" Height="40px" 
                    ImageUrl='<%# Eval("picture") %>' Width="40px" />
                <br />
                id:
                <asp:TextBox ID="idTextBox" runat="server" Text='<%# Bind("id") %>' />
                <br />
                <asp:LinkButton ID="UpdateButton" runat="server" CausesValidation="True" 
                    CommandName="Update" Text="Update" />
                &nbsp;<asp:LinkButton ID="UpdateCancelButton" runat="server" 
                    CausesValidation="False" CommandName="Cancel" Text="Cancel" />
            </EditItemTemplate>
            <FooterStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
            <HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
            <InsertItemTemplate>
                fname:
                <asp:TextBox ID="fnameTextBox" runat="server" Text='<%# Bind("fname") %>' />
                <br />
                lname:
                <asp:TextBox ID="lnameTextBox" runat="server" Text='<%# Bind("lname") %>' />
                <asp:RequiredFieldValidator ID="RequiredFieldValidator6" runat="server" 
                    ControlToValidate="lnameTextBox" ErrorMessage="*Required" ForeColor="Red"></asp:RequiredFieldValidator>
                <br />
                cell:
                <asp:TextBox ID="cellTextBox" runat="server" Text='<%# Bind("cell") %>' />
                <asp:RegularExpressionValidator ID="RegularExpressionValidator5" runat="server" 
                    ControlToValidate="cellTextBox" ErrorMessage="xxx-xxx-xxxx" ForeColor="Red" 
                    ValidationExpression="((\(\d{3}\) ?)|(\d{3}-))?\d{3}-\d{4}"></asp:RegularExpressionValidator>
                <br />
                picture:
                <asp:TextBox ID="pictureTextBox" runat="server" Text='<%# Bind("picture") %>' />
                <br />
                <asp:LinkButton ID="InsertButton" runat="server" CausesValidation="True" 
                    CommandName="Insert" Text="Insert" />
                &nbsp;<asp:LinkButton ID="InsertCancelButton" runat="server" 
                    CausesValidation="False" CommandName="Cancel" Text="Cancel" />
            </InsertItemTemplate>
            <ItemTemplate>
                fname:
                <asp:Label ID="fnameLabel" runat="server" Text='<%# Bind("fname") %>' />
                <br />
                lname:
                <asp:Label ID="lnameLabel" runat="server" Text='<%# Bind("lname") %>' />
                <br />
                cell:
                <asp:Label ID="cellLabel" runat="server" Text='<%# Bind("cell") %>' />
                <br />
                picture:
                <asp:Image ID="Image3" runat="server" Height="40px" 
                    ImageUrl='<%# Eval("picture") %>' Width="40px" />
                <br />
                id:
                <asp:Label ID="idLabel" runat="server" Text='<%# Bind("id") %>' />
                <br />
                <asp:LinkButton ID="EditButton" runat="server" CausesValidation="False" 
                    CommandName="Edit" Text="Edit" />
                &nbsp;<asp:LinkButton ID="DeleteButton" runat="server" CausesValidation="False" 
                    CommandName="Delete" Text="Delete" />
                &nbsp;<asp:LinkButton ID="NewButton" runat="server" CausesValidation="False" 
                    CommandName="New" Text="New" />
            </ItemTemplate>
            <PagerStyle BackColor="#FFCC66" ForeColor="#333333" HorizontalAlign="Center" />
            <RowStyle BackColor="#FFFBD6" ForeColor="#333333" />
        </asp:FormView>
                    </td>
  
                </tr>

            </table>--%>
        DetailsView<br />
        
        <asp:DetailsView ID="DetailsView1" runat="server" AllowPaging="True" 
            AutoGenerateRows="False" CellPadding="4" DataKeyNames="id" 
            DataSourceID="SqlDataSource1" ForeColor="#333333" GridLines="None">
            <AlternatingRowStyle BackColor="White" ForeColor="#284775" />
            <CommandRowStyle BackColor="#E2DED6" Font-Bold="True" />
            <EditRowStyle BackColor="#999999" />
            <FieldHeaderStyle BackColor="#E9ECF1" Font-Bold="True" />
            <Fields>
                <asp:BoundField DataField="fname" HeaderText="fname" SortExpression="fname" />
                <asp:TemplateField HeaderText="lname" SortExpression="lname">
                    <EditItemTemplate>
                        <asp:TextBox ID="DetailView_lname" runat="server" Text='<%# Bind("lname") %>'></asp:TextBox>
                        <asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" 
                            ControlToValidate="DetailView_lname" ErrorMessage="*Required" ForeColor="Red"></asp:RequiredFieldValidator>
                    </EditItemTemplate>
                    <InsertItemTemplate>
                        <asp:TextBox ID="TextBox2" runat="server" Text='<%# Bind("lname") %>'></asp:TextBox>
                        <asp:RequiredFieldValidator ID="RequiredFieldValidator5" runat="server" 
                            ControlToValidate="TextBox2" ErrorMessage="*required" ForeColor="Red"></asp:RequiredFieldValidator>
                    </InsertItemTemplate>
                    <ItemTemplate>
                        <asp:Label ID="Label3" runat="server" Text='<%# Bind("lname") %>'></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="cell" SortExpression="cell">
                    <EditItemTemplate>
                        <asp:TextBox ID="TextBox3" runat="server" Text='<%# Bind("cell") %>'></asp:TextBox>
                        <asp:RegularExpressionValidator ID="RegularExpressionValidator2" runat="server" 
                            ControlToValidate="TextBox3" ErrorMessage="xxx-xxx-xxxx" ForeColor="Red" 
                            ValidationExpression="((\(\d{3}\) ?)|(\d{3}-))?\d{3}-\d{4}"></asp:RegularExpressionValidator>
                    </EditItemTemplate>
                    <InsertItemTemplate>
                        <asp:TextBox ID="TextBox4" runat="server" Text='<%# Bind("cell") %>'></asp:TextBox>
                        <asp:RegularExpressionValidator ID="RegularExpressionValidator4" runat="server" 
                            ControlToValidate="TextBox4" ErrorMessage="xxx-xxx-xxxx" 
                            ValidationExpression="((\(\d{3}\) ?)|(\d{3}-))?\d{3}-\d{4}"></asp:RegularExpressionValidator>
                    </InsertItemTemplate>
                    <ItemTemplate>
                        <asp:Label ID="Label4" runat="server" Text='<%# Bind("cell") %>'></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:ImageField DataImageUrlField="picture" HeaderText="picture">
                    <ControlStyle Height="40px" Width="40px" />
                </asp:ImageField>
                <asp:BoundField DataField="id" HeaderText="id" InsertVisible="False" 
                    SortExpression="id" />
                <asp:TemplateField ShowHeader="False">
                    <EditItemTemplate>
                        <asp:LinkButton ID="LinkButton4" runat="server" CausesValidation="True" 
                            CommandName="Update" Text="Update"></asp:LinkButton>
                        &nbsp;<asp:LinkButton ID="LinkButton2" runat="server" CausesValidation="False" 
                            CommandName="Cancel" Text="Cancel"></asp:LinkButton>
                    </EditItemTemplate>
                    <InsertItemTemplate>
                        <asp:LinkButton ID="DetailsViewInsert" runat="server" CausesValidation="True" 
                            CommandName="Insert" Text="Insert"></asp:LinkButton>
                        &nbsp;<asp:LinkButton ID="LinkButton5" runat="server" CausesValidation="False" 
                            CommandName="Cancel" Text="Cancel"></asp:LinkButton>
                    </InsertItemTemplate>
                    <ItemTemplate>
                        <asp:LinkButton ID="LinkButton6" runat="server" CausesValidation="False" 
                            CommandName="Edit" Text="Edit"></asp:LinkButton>
                        &nbsp;<asp:LinkButton ID="LinkButton7" runat="server" CausesValidation="False" 
                            CommandName="New" Text="New"></asp:LinkButton>
                        &nbsp;<asp:LinkButton ID="LinkButton3" runat="server" CausesValidation="False" 
                            CommandName="Delete" Text="Delete"></asp:LinkButton>
                    </ItemTemplate>
                </asp:TemplateField>
            </Fields>
            <FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
            <HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
            <PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
            <RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
        </asp:DetailsView>


        Form View<br />
        <asp:FormView ID="FormView1" runat="server" AllowPaging="True" CellPadding="4" 
            DataKeyNames="id" DataSourceID="SqlDataSource1" ForeColor="#333333">
            <EditItemTemplate>
                fname:
                <asp:TextBox ID="fnameTextBox" runat="server" Text='<%# Bind("fname") %>' />
                <br />
                lname:
                <asp:TextBox ID="lnameTextBox" runat="server" Text='<%# Bind("lname") %>' />
                <asp:RequiredFieldValidator ID="RequiredFieldValidator4" runat="server" 
                    ControlToValidate="lnameTextBox" ErrorMessage="Required" ForeColor="Red"></asp:RequiredFieldValidator>
                <br />
                cell:
                <asp:TextBox ID="cellTextBox" runat="server" Text='<%# Bind("cell") %>' />
                <asp:RegularExpressionValidator ID="RegularExpressionValidator3" runat="server" 
                    ControlToValidate="cellTextBox" ErrorMessage="xxx-xxx-xxxx" ForeColor="Red" 
                    ValidationExpression="((\(\d{3}\) ?)|(\d{3}-))?\d{3}-\d{4}"></asp:RegularExpressionValidator>
                <br />
                picture:
                <asp:TextBox ID="pictureTextBox" runat="server" Text='<%# Bind("picture") %>' />
                <asp:Image ID="Image2" runat="server" Height="40px" 
                    ImageUrl='<%# Eval("picture") %>' Width="40px" />
                <br />
                id:
                <asp:TextBox ID="idTextBox" runat="server" Text='<%# Bind("id") %>' />
                <br />
                <asp:LinkButton ID="UpdateButton" runat="server" CausesValidation="True" 
                    CommandName="Update" Text="Update" />
                &nbsp;<asp:LinkButton ID="UpdateCancelButton" runat="server" 
                    CausesValidation="False" CommandName="Cancel" Text="Cancel" />
            </EditItemTemplate>
            <FooterStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
            <HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
            <InsertItemTemplate>
                fname:
                <asp:TextBox ID="fnameTextBox" runat="server" Text='<%# Bind("fname") %>' />
                <br />
                lname:
                <asp:TextBox ID="lnameTextBox" runat="server" Text='<%# Bind("lname") %>' />
                <asp:RequiredFieldValidator ID="RequiredFieldValidator6" runat="server" 
                    ControlToValidate="lnameTextBox" ErrorMessage="*Required" ForeColor="Red"></asp:RequiredFieldValidator>
                <br />
                cell:
                <asp:TextBox ID="cellTextBox" runat="server" Text='<%# Bind("cell") %>' />
                <asp:RegularExpressionValidator ID="RegularExpressionValidator5" runat="server" 
                    ControlToValidate="cellTextBox" ErrorMessage="xxx-xxx-xxxx" ForeColor="Red" 
                    ValidationExpression="((\(\d{3}\) ?)|(\d{3}-))?\d{3}-\d{4}"></asp:RegularExpressionValidator>
                <br />
                picture:
                <asp:TextBox ID="pictureTextBox" runat="server" Text='<%# Bind("picture") %>' />
                <br />
                <asp:LinkButton ID="InsertButton" runat="server" CausesValidation="True" 
                    CommandName="Insert" Text="Insert" />
                &nbsp;<asp:LinkButton ID="InsertCancelButton" runat="server" 
                    CausesValidation="False" CommandName="Cancel" Text="Cancel" />
            </InsertItemTemplate>
            <ItemTemplate>
                fname:
                <asp:Label ID="fnameLabel" runat="server" Text='<%# Bind("fname") %>' />
                <br />
                lname:
                <asp:Label ID="lnameLabel" runat="server" Text='<%# Bind("lname") %>' />
                <br />
                cell:
                <asp:Label ID="cellLabel" runat="server" Text='<%# Bind("cell") %>' />
                <br />
                picture:
                <asp:Image ID="Image3" runat="server" Height="40px" 
                    ImageUrl='<%# Eval("picture") %>' Width="40px" />
                <br />
                id:
                <asp:Label ID="idLabel" runat="server" Text='<%# Bind("id") %>' />
                <br />
                <asp:LinkButton ID="EditButton" runat="server" CausesValidation="False" 
                    CommandName="Edit" Text="Edit" />
                &nbsp;<asp:LinkButton ID="DeleteButton" runat="server" CausesValidation="False" 
                    CommandName="Delete" Text="Delete" />
                &nbsp;<asp:LinkButton ID="NewButton" runat="server" CausesValidation="False" 
                    CommandName="New" Text="New" />
            </ItemTemplate>
            <PagerStyle BackColor="#FFCC66" ForeColor="#333333" HorizontalAlign="Center" />
            <RowStyle BackColor="#FFFBD6" ForeColor="#333333" />
        </asp:FormView>            

        <br />
            <asp:Table ID="Table2" runat="server">
            <asp:TableRow>
            <asp:TableCell>
                <asp:ImageMap ID="ImageMap1" runat="server" Height="150px" ImageUrl="~/Images/Tulips.jpg" Width="150px">
                    <asp:CircleHotSpot HotSpotMode="PostBack" PostBackValue="Circle Hotspot" 
                        Radius="30" X="100" Y="100" />
                </asp:ImageMap>
            </asp:TableCell>
            <asp:TableCell>
                <asp:ImageButton ID="ImageButton1" runat="server" Height="150px" ImageUrl="~/Images/Tulips.jpg" Width="150px" />
            </asp:TableCell>            
            </asp:TableRow>
            <asp:TableRow>
            <asp:TableCell>
                <asp:CheckBox ID="CheckBox1" runat="server" AutoPostBack="True" Text="ImageMap" />
            </asp:TableCell>
            <asp:TableCell>
                <asp:CheckBox ID="CheckBox2" runat="server" AutoPostBack="True" Text="ImageButton" />
            </asp:TableCell>            
            </asp:TableRow>
            </asp:Table>
        <asp:Label ID="ImageMapLabel" runat="server" ForeColor="#3399FF"></asp:Label>
        <br />      

        </ContentTemplate>
        </asp:UpdatePanel>
                <asp:UpdateProgress ID="UpdateProgress1" runat="server" 
            AssociatedUpdatePanelID="UpdatePanel2">
            <ProgressTemplate>
            <div>
            Please Wait...
            </div>
            </ProgressTemplate>
        </asp:UpdateProgress>

        <br />
        <asp:Label ID="CheckBoxListLabel" runat="server" ForeColor="#3399FF"></asp:Label>
        <br />
        <strong>CheckBoxList</strong><asp:CheckBoxList ID="CheckBoxList1" 
            runat="server" AutoPostBack="True" DataSourceID="SqlDataSource1" 
            DataTextField="cell" DataValueField="lname">
        </asp:CheckBoxList>
        <asp:Button ID="Button2" runat="server" Text="Validate CheckBoxlist" 
            ValidationGroup="1" Width="189px" />
        <asp:Label ID="Validation" runat="server"></asp:Label>
        <br />
        <asp:CustomValidator ID="CustomValidator1" runat="server" ErrorMessage="Nothing is Checked" 
            ForeColor="Red"  ValidationGroup="1" 
            ClientValidationFunction="ValidateCheckBoxList"></asp:CustomValidator>


        <br />
        <br />
        <asp:TextBox ID="EvenNumber" runat="server" Width="128px"></asp:TextBox>
        <asp:CustomValidator ID="CustomValidator2" runat="server" 
            ClientValidationFunction="EvenNumberValidationClient" 
            ErrorMessage="Even Number Only" ForeColor="Red" ValidationGroup="2" 
            ControlToValidate="EvenNumber">*</asp:CustomValidator>
        <asp:RequiredFieldValidator ID="RequiredFieldValidator7" runat="server" 
            ControlToValidate="EvenNumber" ErrorMessage="This filed is required!" 
            ForeColor="Red" ValidationGroup="2">*</asp:RequiredFieldValidator>
        <br />
        <asp:Button ID="ValidateTextBox" runat="server" Text="Validate EvenNumber" 
            ValidationGroup="2" />
        <asp:ValidationSummary ID="ValidationSummary2" runat="server" ForeColor="Red" 
            ValidationGroup="2" />
        <br /><br />
        Bulleted List Displays LinkButton<asp:BulletedList 
            ID="BulletedList1" runat="server" DataSourceID="SqlDataSource1" 
            DataTextField="lname" DataValueField="cell" DisplayMode="LinkButton" 
            Width="325px">
        </asp:BulletedList>
        <br />
        <asp:Label ID="BulletedListLabel" runat="server" ForeColor="#0099FF"></asp:Label>
        <br />
        <br />
        <br />
        DropDownList<br />
        <br />
        <asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True" 
            DataSourceID="SqlDataSource1" DataTextField="lname" DataValueField="cell">
        </asp:DropDownList>
        <br />
        <br />
        <asp:Label ID="DropDownListLabel" runat="server" ForeColor="#3399FF"></asp:Label>
        <br />
        <br />
        <br />
        LinkButton<br />
        <asp:LinkButton ID="LinkButton1" runat="server" 
            onclientclick="Navigate()">Yahasoft</asp:LinkButton>
        <br />
        <br />
        <script type="text/javascript">
                function Navigate() {
                    alert("New Window Openning");
                    javascript: window.open("http://www.yahasoft.com");

                }

                function ValidateCheckBoxList(source, args) {

                    var chkListModules = document.getElementById('<%= CheckBoxList1.ClientID %>');
                    var chkListinputs = chkListModules.getElementsByTagName("input");
                    for (var i = 0; i < chkListinputs.length; i++) {
                        if (chkListinputs[i].checked) {
                            args.IsValid = true;
                            return;
                        }
                    }
                    args.IsValid = false;
                    alert("Nothing is Checked!");
                }
                function EvenNumberValidationClient(src, args) {
                    var inputNumber = $get('EvenNumber').value;
                    if (parseInt(inputNumber) % 2 != 0) {
                        args.IsValid = false;
                        alert("Even Number Only!");
                    }
                    else
                        args.IsValid = true;
                //args.Value is not valid if not specifying ControlToValidate
                //                    if (args.Value % 2 != 0) {
                //                        args.IsValid = false;
                //                        alert("Even Number Only!");
                //                    }
                //                    else
                //                        args.IsValid = true;
                }


        </script>

        Hyperlink<br />
        <asp:HyperLink ID="HyperLink1" runat="server" 
            NavigateUrl="http://www.yahasoft.com/">Yahasoft</asp:HyperLink>
        <br />
        <br />
        <br />
        DataList<br />
        <br />
        <asp:DataList ID="DataList1" runat="server" CellPadding="4" 
            DataSourceID="SqlDataSource1" ForeColor="#333333">
            <AlternatingItemStyle BackColor="White" ForeColor="#284775" />
            <FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
            <HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
            <ItemStyle BackColor="#F7F6F3" ForeColor="#333333" />
            <ItemTemplate>
                fname:
                <asp:Label ID="fnameLabel" runat="server" Text='<%# Eval("fname") %>' />
                <br />
                lname:
                <asp:Label ID="lnameLabel" runat="server" Text='<%# Eval("lname") %>' />
                <br />
                cell:
                <asp:Label ID="cellLabel" runat="server" Text='<%# Eval("cell") %>' />
                <br />
                picture:
                <asp:Label ID="pictureLabel" runat="server" Text='<%# Eval("picture") %>' />
                <br />
                id:
                <asp:Label ID="idLabel" runat="server" Text='<%# Eval("id") %>' />
                <br />
<br />
            </ItemTemplate>
            <SelectedItemStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
        </asp:DataList>
    
    </div>

    </form>
</body>
</html>
